[data-component="trigger"]{
  display: inline-block;
  position: relative;
  width: 40px;
  height: 30px;
  cursor: pointer;
  span{
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgb(255, 255, 255);
    transition: all 0.2s
  }
  span:nth-of-type(1){
    top: 0;
  }
  span:nth-of-type(2){
    top: 14px;
  }
  span:nth-of-type(3){
    bottom: 0;
  }
}
[data-component="trigger"].active{
  span:nth-of-type(1){
    transform: translateY(13.5px) rotate(-45deg);
  }
  span:nth-of-type(2){
    opacity: 0;
  }
  span:nth-of-type(3){
    transform: translateY(-13.5px) rotate(45deg);
  }
}